<template>
  <div class="theResults">
    <!--彩种所有导航-->
    <div class="theResultsNav">
      <nav class="navNumLi">
        <li :class="{selected:navIndex == curNavIndex}" v-for="(navItem,navIndex) in lotteryNav"
            @click="navTitleEvent(navIndex)">{{navItem}}
        </li>
      </nav>
      <!--全部彩种 列表-->
      <div class="theResultsNavAll">
        <ul>
          <li v-for="router in theRLotteryData" :class="{'on': router.code == $route.query.code}">
            <router-link :to="{name: 'theResults', query: {code: router.code, name: router.name}}">
              <p>{{router.name}}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!--今天 昨天 后天-->
      <div class="todayNav">
        <nav class="todayNavList">
          <li v-for="(today,index) in todayNavListData" :class="{'on': todayNavIndex === index}"
              @click="todayNavOnThe(index)">{{today}}
          </li>
        </nav>
        <div class="tableWrapIssue">
          <ul>
            <li v-for="sub in submissionLotteryData">
              <article class="tableArtIss">
                <section>
                  <div class="tableArtSecNum">
                    <div class="tableArtLeft">
                      <p>名称：{{$route.query.name}}</p>
                      <p>期号：<span>{{sub.number}}</span></p>
                      <!--<p>time: <span>{{sub.openTime}}</span></p>-->
                    </div>
                    <div class="tableArtLotteryOf"
                         :class="{floatLeft: _Format.formatCode($route.query.code).happy8, floatRight: !_Format.formatCode($route.query.code).happy8}">
                      <!--百家乐-->
                      <div class="baccaratNum" v-if="_Format.formatCode($route.query.code).baccarat">
                        <P>
                          <img :src="bankerIcon" alt="">
                          <img :src="_Modulation.getSmallCard(sub.waves?sub.waves[resIndex]:'1',resItem?resItem:'?')" alt="" v-for="(resItem,resIndex) in sub.data" v-if="resIndex<2">
                        </P>
                        <P>
                          <img :src="_Modulation.getSmallCard(sub.waves?sub.waves[resIndex]:'1',resItem?resItem:'?')" alt="" v-for="(resItem,resIndex) in sub.data" v-if="resIndex>1">
                          <img :src="idleIcon" alt="">
                        </P>
                      </div>
                      <!--俄罗斯大转盘-->
                      <div class="awardNumber awardNumberPcty" v-if="_Format.formatCode($route.query.code).bigWheel">
                        <p v-for="(d,i) in sub.data"
                           :class="{'red': _Format.lotColor(d, $route.query.code) === 'red', 'black': _Format.lotColor(d, $route.query.code) === 'black'}">
                          {{d}}</p>
                      </div>
                      <!--广东11选五-->
                      <div class="awardNumber"
                           v-if="_Format.formatCode($route.query.code).isNo || _Format.formatCode($route.query.code).happy8">
                        <p v-for="d in sub.data">{{d}}</p>
                      </div>
                      <!--pc蛋蛋-->
                      <div class="awardNumber awardNumberPcty" v-if="_Format.formatCode($route.query.code).add">
                        <p v-for="(d,dIndex) in sub.data" v-if="dIndex < 3">{{d}}</p>
                        <p :class="{'red': _Format.lotColor(_Util.sumNum(sub.data), $route.query.code) === 'red', 'green': _Format.lotColor(_Util.sumNum(sub.data), $route.query.code) === 'green', 'blue': _Format.lotColor(_Util.sumNum(sub.data), $route.query.code) === 'blue', 'gray': _Format.lotColor(_Util.sumNum(sub.data), $route.query.code) === 'gray'}">
                          {{_Util.sumNum(sub.data)}}</p>
                      </div>
                      <!--江苏快三-->
                      <div class="awardNumber awardNumberJSK3" v-if="_Format.formatCode($route.query.code).shares">
                        <p v-for="img in sub.dataImg"><img :src="img" alt=""></p>
                      </div>
                      <!--北京pk10-->
                      <div class="awardNumber awardNumberPK" v-if="_Format.formatCode($route.query.code).pk10">
                        <p v-for="d in sub.data">{{d}}</p>
                      </div>
                      <!--香港六合彩-->
                      <div class="awardNumber awardNumLHColor" v-if="_Format.formatCode($route.query.code).zodiac">
                        <p v-for="(d,i) in sub.data"
                           :class="{'red': _Format.lotColor(d, $route.query.code) === 'red', 'green': _Format.lotColor(d, $route.query.code) === 'green', 'blue': _Format.lotColor(d, $route.query.code) === 'blue', 'gray': _Format.lotColor(d, $route.query.code) === 'gray'}">
                          <span>{{d}}</span>
                          <span v-if="sub.animals">{{sub.animals[i]}}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </section>
                <section v-if="sub.kjResult">
                  <div class="tableArtSection displayFlex" v-if="sub.kjResult[0]">
                    <p v-for="kjName in sub.kjResult[0]">{{kjName}}</p>
                  </div>
                  <div class="tableArtSection tableArtSectionLine displayFlex">
                    <p v-for="kjName in sub.kjResult[1]">{{kjName}}</p>
                  </div>
                </section>
              </article>
            </li>
          </ul>
        </div>
      </div>
      <div class="theResultsPage">
        <Page :total="pageTotal" :page-size="submission.pageSize" :current="submission.pageNum"
              @on-change="change"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import './theResults.scss';
  import lotteryMumColor from '../../theColor/color/data/lottery_num_color';
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        lotteryNav: ['彩票游戏'],
        curNavIndex: 0,
        todayNavListData: ['今天', '昨天', '前天'],
        todayNavIndex: -1,
        tableWrapperTitleData: "",
        submission: {
          lotteryCode: this.$route.query.code,
          pageNum: 1,
          pageSize: 7,
          startStr: '',
          endStr: ''
        },
        submissionLotteryData: [],
        pageTotal: 0,
        theRLotteryData: [],
        bankerIcon: require('../../../assets/images/theColor/baccarat/icon/banker.png'),
        idleIcon: require('../../../assets/images/theColor/baccarat/icon/idle.png'),
      }
    },
    computed: {
      ...mapState({
        allLotteryListData: state => state.mutations.allLotteryListData, //所有彩种
      })
    },
    created() {},
    activated() {
      this.init();
    },
    methods: {
      init() {
        let that = this;
        //初始化
        that.theRLotteryData = [];
        that.curNavIndex = 0;
        that.todayNavIndex = -1;
        that.submission.lotteryCode = that.$route.query.code;
        that.clearData();
        that.getCurNavIndex();
        this.initData(this.curNavIndex);
        that.theLotteryDataEvent();
      },
      //获取当前导航选中状态
      getCurNavIndex() {
        let that = this;
        that.allLotteryListData.tradition.forEach((dat, i) => {
          dat.subKindList.forEach((v, y) => {
            let lotCode = v.isDefault === 1 ? v.officialCode : v.creditCode;
            if (lotCode == that.$route.query.code) {
              that.curNavIndex = 0;
            }
          })
        });
        that.allLotteryListData.recreation.forEach((dat, i) => {
          dat.subKindList.forEach((v, y) => {
            let code = v.isDefault === 1 ? v.officialCode : v.creditCode;
            if (code == that.$route.query.code) {
              that.curNavIndex = 1;
            }
          })
        });
      },
      initData(index) {
        let that = this;
        this.theRLotteryData = [];
        if (index == '0') {
          that.allLotteryListData.tradition.forEach((dat, i) => {
            dat.subKindList.forEach((v, y) => {
              let dataOne = {};
              dataOne.code = v.isDefault === 1 ? v.officialCode : v.creditCode;
              dataOne.name = v.name;
              that.theRLotteryData.push(dataOne);
            })
          });
        } else {
          that.allLotteryListData.recreation.forEach((dat, i) => {
            dat.subKindList.forEach((v, y) => {
              let dataOne = {};
              dataOne.code = v.isDefault === 1 ? v.officialCode : v.creditCode;
              dataOne.name = v.name;
              that.theRLotteryData.push(dataOne);
            })
          });
        }
      },
      //清除数据
      clearData() {
        this.submissionLotteryData = [];
        this.pageTotal = 1;
        this.submission.pageNum = 1;
        this.submission.startStr = '';
        this.submission.endStr = '';
      },
      //开奖结果
      theLotteryDataEvent() {
        let that = this;
        that._Util.post(that, that._Api.POST_GET_HISTORY_DATA, that.submission, (data) => {
          let dataCode = that.$route.query.code;
          that.submissionLotteryData = data ? data.result : [];
          if (that.submissionLotteryData.length > 0) {
            data.result.forEach((v, i) => {
              v.data = v.data.split(',');
              if (that._Format.formatCode(dataCode).baccarat) {
                v.waves = v.waves?v.waves.split(','):['1','2','3','4'];
              }
              if (that._Format.formatCode(dataCode).zodiac) {
                v.animals = v.animals ? v.animals.split(',') : [];
              }
              if (v.kjResult) {
                v.kjResult = JSON.parse(v.kjResult);
              }
              v.openTime = that._Util.formatDateTime(v.openTime);
            });
            if (that._Format.formatCode(dataCode).shares) {
              data.result.forEach((v, i) => {
                v.dataImg = [];
                v.data.forEach((h, y) => {
                  let m = require('../../../assets/images/theColor/dice/dice' + h + '.png');
                  v.dataImg.push(m);
                })
              });
            }
            that.pageTotal = data.total;
          }
          
        })
      },
      change(page) {
        this.submission.pageNum = page;
        this.theLotteryDataEvent();
      },
      todayNavOnThe(index) {
        let that = this;
        that.todayNavIndex = index;
        that.clearData();
        switch (index) {
          case 0:
            that.submission.startStr = that._Util.currentDateYear(0);
            that.submission.endStr = that._Util.currentDateYear(0);
            break;
          case 1:
            that.submission.startStr = that._Util.currentDateYear(-1);
            that.submission.endStr = that._Util.currentDateYear(-1);
            break;
          case 2:
            that.submission.startStr = that._Util.currentDateYear(-2);
            that.submission.endStr = that._Util.currentDateYear(-2);
            break;
        }
        this.theLotteryDataEvent();
      },
      //导航标题点击事件
      navTitleEvent(index) {
        this.curNavIndex = index;
        
      },
    },
    watch: {
      '$route.query.code'() {
        let that = this;
        if (that.$router.history.current.name !== 'theResults') return;
        if(that.$route.name == 'theResults'){
          that.submission.lotteryCode = that.$route.query.code;
          that.init();
        }
      },
      'allLotteryListData'() {
        if (this.$router.history.current.name !== 'theResults') return;
        if(this.$route.name == 'theResults'){
          this.getCurNavIndex();
          this.initData(this.curNavIndex);
        }
      },
      'curNavIndex'(val) {
        if (this.$router.history.current.name !== 'theResults') return;
        if(this.$route.name == 'theResults'){
          this.initData(val);
        }
      }
    }
  }
</script>
